<!doctype html>
<!--[if lte IE 8]>     <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width" />
  <meta name="description" content="Cascading grid layout library" />

  <title>Masonry Events</title>


  
    <!-- DEV MODE - including each .css file -->
    
      <link rel="stylesheet" href="bower_components/normalize-css/normalize.css" />
    
      <link rel="stylesheet" href="css/base.css" />
    
      <link rel="stylesheet" href="css/code.css" />
    
      <link rel="stylesheet" href="css/demos.css" />
    
      <link rel="stylesheet" href="css/footer.css" />
    
      <link rel="stylesheet" href="css/hero.css" />
    
      <link rel="stylesheet" href="css/icons.css" />
    
      <link rel="stylesheet" href="css/index.css" />
    
      <link rel="stylesheet" href="css/layout.css" />
    
      <link rel="stylesheet" href="css/modules.css" />
    
      <link rel="stylesheet" href="css/site-nav.css" />
    
  

  
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@desandro" />
  <meta name="twitter:url" content="http://masonry.desandro.com/events.html" />
  <meta name="twitter:title" content="Masonry Events" />
  <meta name="twitter:description" content="Cascading grid layout library" />

  

</head>
<body class="events-page" data-page="events">

  <div id="site-nav">
    <div class="primary-content">
      <h1>Masonry</h1>
      <ol>
        <li class="nav-options"><a href="options.html">Options</a></li>
        <li class="nav-methods"><a href="methods.html">Methods</a></li>
        <li class="nav-events"><a href="events.html">Events</a></li>
        <li class="nav-appendix"><a href="appendix.html">Appendix</a></li>
        <li class="nav-faq"><a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>

  
  

  <div id="content">

    <div class="primary-content">
      
        <h1>Events</h1>
        

      
      
        <ul id="page-nav">
          
            <li><a href="#layoutcomplete">layoutComplete</a></li>
          
            <li><a href="#removecomplete">removeComplete</a></li>
          
        </ul>
      
    </div>

    
    
<div id="notification"></div>

<div class="primary-content">

<p>Masonry is an Event Emitter. You can bind listeners to events with the <a href="methods.html#on">on</a> and <a href="methods.html#off">off</a> methods.</p>

<pre><code class="js"><span class="keyword">var</span> msnry = <span class="keyword">new</span> Masonry( elem );

<span class="function"><span class="keyword">function</span> <span class="title">onLayout</span><span class="params">()</span> {</span>
  console.log(<span class="string">'layout done'</span>);
}
<span class="comment">// bind event listener</span>
msnry.on( <span class="string">'layoutComplete'</span>, onLayout );
<span class="comment">// un-bind event listener</span>
msnry.off( <span class="string">'layoutComplete'</span>, onLayout );
<span class="comment">// return true to trigger an event listener just once</span>
msnry.on( <span class="string">'layoutComplete'</span>, <span class="keyword">function</span>() {
  console.log(<span class="string">'layout done, just this one time'</span>);
  <span class="keyword">return</span> <span class="literal">true</span>;
});</code></pre>


</div><div class="primary-content">

<h2 id="layoutcomplete">layoutComplete</h2>

<pre><code class="js">msnry.on( <span class="string">'layoutComplete'</span>, <span class="keyword">function</span>( msnryInstance, laidOutItems ) { <span class="comment">//...</span>
<span class="comment">// or with jQuery</span>
$container.masonry( <span class="string">'on'</span>, <span class="string">'layoutComplete'</span>, <span class="keyword">function</span>( msnryInstance, laidOutItems ) {} )</code></pre>


<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit"><code>msnryInstance</code></h5>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>Masonry</i></span>
    </p>
    <p class="description param-bit">the Masonry instance</p>
  </li>
  <li class="param">
    <h5 class="param-name param-bit"><code>laidOutItems</code></h5>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>Array</i> of <i>Masonry.Item</i>s</span>
    </p>
    <p class="description param-bit">items that were laid out</p>
  </li>
</ul>

<p>Triggered after a layout and all positioning transitions have been completed.</p>

<div class="row example">
  <div class="cell example-code">
<pre><code class="js">msnry.on( <span class="string">'layoutComplete'</span>, <span class="keyword">function</span>( msnryInstance, laidOutItems ) {
  console.log(<span class="string">'Masonry layout completed on '</span> + laidOutItems.length + <span class="string">' items'</span>);
});</code></pre>

  </div>
  <div id="layout-complete-demo" class="cell demo">
    <p class="instruction">Resize browser or click item to toggle size</p>
    <div class="masonry clickable">
      <div class="item"></div>
<div class="item w2 h2"></div>
<div class="item h3"></div>
<div class="item h2"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h3"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>

    </div>
    <p class="edit"><a href="http://codepen.io/desandro/pen/htsui">Edit this example on CodePen</a></p>
  </div>
</div>

</div><div class="primary-content">

<h2 id="removecomplete">removeComplete</h2>

<pre><code class="js">msnry.on( <span class="string">'removeComplete'</span>, <span class="keyword">function</span>( msnryInstance, removedItems ) { <span class="comment">//...</span>
<span class="comment">// or with jQuery</span>
$container.masonry( <span class="string">'on'</span>, <span class="string">'removeComplete'</span>, <span class="keyword">function</span>( msnryInstance, removedItems ) {} )</code></pre>


<p>Triggered after an item element has been removed.</p>

<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit"><code>msnryInstance</code></h5>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>Masonry</i></span>
    </p>
    <p class="description param-bit">the Masonry instance</p>
  </li>
  <li class="param">
    <h5 class="param-name param-bit"><code>removedItems</code></h5>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>Array</i> of <i>Masonry.Item</i>s</span>
    </p>
    <p class="description param-bit">items that were removed</p>
  </li>
</ul>

<div class="row example">
  <div class="cell example-code">
<pre><code class="js">msnry.on( <span class="string">'removeComplete'</span>, <span class="keyword">function</span>( msnryInstance, removedItems ) {
  console.log( <span class="string">'Removed '</span> + removedItems.length + <span class="string">' items'</span> );
});</code></pre>

  </div>
  <div id="remove-complete-demo" class="cell demo">
    <p class="instruction">Click items to remove them</p>
    <div class="masonry clickable">
      <div class="item"></div>
<div class="item w2 h2"></div>
<div class="item h3"></div>
<div class="item h2"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h3"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>

      <div class="item"></div>
<div class="item w2 h2"></div>
<div class="item h3"></div>
<div class="item h2"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h3"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>

    </div>
    <p class="edit"><a href="http://codepen.io/desandro/pen/JknEe">Edit this example on CodePen</a></p>
  </div>
</div>

</div>


  </div>

  <div id="footer">
    <div class="primary-content">
      Masonry by <a href="http://desandro.com">David DeSandro</a>. Make something rad with it.
    </div>
  </div>

<!-- Masonry does NOT require jQuery.
     jQuery is only used to demonstrate Masonry as a jQuery plugin -->
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>


  <!-- DEV MODE - including each .js file -->
  
    <script src="bower_components/classie/classie.js"></script>
  
    <script src="bower_components/eventie/eventie.js"></script>
  
    <script src="bower_components/doc-ready/doc-ready.js"></script>
  
    <script src="bower_components/get-style-property/get-style-property.js"></script>
  
    <script src="bower_components/eventEmitter/EventEmitter.js"></script>
  
    <script src="bower_components/imagesloaded/imagesloaded.js"></script>
  
    <script src="bower_components/jquery-bridget/jquery.bridget.js"></script>
  
    <script src="bower_components/get-size/get-size.js"></script>
  
    <script src="bower_components/matches-selector/matches-selector.js"></script>
  
    <script src="bower_components/outlayer/item.js"></script>
  
    <script src="bower_components/outlayer/outlayer.js"></script>
  
    <script src="bower_components/masonry/masonry.js"></script>
  
    <script src="js/controller.js"></script>
  
    <script src="js/pages/events.js"></script>
  
    <script src="js/pages/faq.js"></script>
  
    <script src="js/pages/index.js"></script>
  
    <script src="js/pages/methods.js"></script>
  




</body>
</html>
